<template>
  <div id="home" class="wrapper">
    <nav-bar class="home-nav"><div slot="center">购物车</div></nav-bar>
    <tab-control :titles="['流行','新款','精选']" @tabclick="tabclick" ref="tabControl1" class="tab-control" v-show="isTabFixed"/>
     <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="loadMore">
        <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
        <HomeRecommendView :recommends="recommends"/>
        <feature-view/>
        <tab-control :titles="['流行','新款','精选']" @tabclick="tabclick" ref="tabControl2"/>
        <goods-list :goods="goods[currentType].list"/>
    </scroll>
    <back-top @click.native="backclick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import HomeSwiper from "@/views/home/childComps/HomeSwiper";
import HomeRecommendView from "@/views/home/childComps/HomeRecommendView";
import FeatureView from "@/views/home/childComps/FeatureView";

import NavBar from "@/components/common/navbar/NavBar";
import tabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import Scroll from "@/components/common/scroll/Scroll";
import BackTop from "@/components/content/backTop/BackTop";

import {getHomeMultidata,getHomeGoods} from "@/network/home";


export default {
    name: "Home",
    components:{
      NavBar,
      HomeSwiper,
      HomeRecommendView,
      FeatureView,
      tabControl,
      GoodsList,
      Scroll,
      BackTop
    },
  data(){
      return{
        banners:[],
        recommends:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currentType:'pop',
        isShowBackTop:false,
        tabOffsetTop:0,
        isTabFixed:false
      }
  },
    created(){
       this.getHomeMultidata()
       this.getHomeGoods('pop')
       this.getHomeGoods('new')
       this.getHomeGoods('sell')
       this.tabOffsetTop=this.$refs.tabcontrol
    },
      mounted(){
        const refresh=this.debounce(this.$refs.scroll.refresh,500)
        this.$bus.$on('ItemImageLoad',()=>{
          refresh()
          //this.$refs.scroll.scroll.refresh()
        })
      },
      methods:{
        debounce(func,delay){
           let timer=null
          return function(...args){
             if(timer) clearTimeout(timer)
            timer=setTimeout(()=>{
             func.apply(this,args)
            },delay)
          }
        },
        tabclick(index){
          switch(index) {
            case 0:
              this.currentType = 'pop'
              break
            case 1:
              this.currentType = 'new'
              break
            case 2:
              this.currentType = 'sell'
              break
          }
          this.$refs.tabControl1.currentIndex=index
          this.$refs.tabControl2.currentIndex=index
        },
        backclick(){
          this.$refs.scroll.scrollTo(0,0)
        },
        contentScroll(position){
          this.isShowBackTop=-position.y>1000
          this.isTabFixed=-position.y>this.tabOffsetTop
        },
        loadMore(){
        this.getHomeGoods(this.currentType),
          this.$refs.scroll.scroll.refresh()
        },
        swiperImageLoad(){
          this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
          //console.log(this.$refs.tabControl2.$el.offsetTop)
        },
        getHomeMultidata(){
        getHomeMultidata().then(res=>{
          //console.log(res);
          this.banners=res.data.banner.list;
          this.recommends=res.data.recommend.list;
      })
        },
        getHomeGoods(type) {
          const page =this.goods[type].page+1
          getHomeGoods(type, page).then(res => {
            //console.log(res);
            this.goods[type].list.push(...res.data.list)
              this.goods[type].page +=1
            this.$refs.scroll.finishPullUp()
          })
      }
    }
  }
</script>

<style scoped>
      #home{
        /*padding-top:44px;*/
        height:100vh;
        position:relative;
      }
     .home-nav{
       background-color: #ff8198;
       color:#fff;
      /* position:fixed;
       left:0;
       right:0;
       top:0;
       z-index:9;*/
     }
      .content {
        overflow: hidden;
        position:absolute;
        top:44px;
        bottom:60px;
        left:0;
        right:0;
      }
      .tab-control{
        position:relative;
        z-index:9
      }
</style>
